/**
 * 仓库权限
 */
<template>
  <vp-dialog ref="editDialogRef" :span="1">
        <template #title>
            <vp-label zh="仓库权限配置" en="Warehouse Perm Config" align="left"/>
        </template>
            <el-table 
                :data="tableData"  
                v-loading="loading"
                @selection-change="handleSelectionChange" 
                @row-click="handleRowClick" 
                ref="multipleTable" 
                highlight-current-row 
                stripe 
                border  
                style="width: 100%" 
                row-key="id"
            >
                <el-table-column type="selection" :reserve-selection="true" align="center" width="55" />
                <el-table-column prop="bh" show-overflow-tooltip>
                    <template #header><vp-label zh="仓库号" en="No."/></template>
                </el-table-column>
                <el-table-column prop="mc" show-overflow-tooltip>
                    <template #header><vp-label zh="仓库名称" en="Name"/></template>
                </el-table-column>
                <el-table-column prop="jdmc" show-overflow-tooltip>
                    <template #header><vp-label zh="基地" en="Base"/></template>
                </el-table-column>
                <el-table-column prop="lb" show-overflow-tooltip>
                    <template #header><vp-label zh="类别" en="Type" /></template>
                    <template #default="scope">
                        <vp-label v-if="scope.row.lb === 10" zh="可用库" en="Available Warehouse" />
                        <vp-label v-else-if="scope.row.lb === 20" zh="待修库" en="To Be Repaired Warehouse" />
                        <vp-label v-else-if="scope.row.lb === 30" zh="报废库" en="Scrap Warehouse" />
                        <vp-label v-else-if="scope.row.lb === 40" zh="隔离库" en="Isolated Warehouse" />
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="pt16">
                <span style="min-height: 32px;padding-top: 5px;color: var(--el-text-color-regular);font-weight: bold;">已选仓库/Checked Warehouse：</span>
                <el-tag
                    v-for="tag in multipleSelection"
                    :key="tag.id"
                    class="ml5 mr5"
                    closable
                    type="success"
                    effect="dark"
                    @close="handleSelectedDelete(tag)"
                >
                {{ (tag.bh || '') + ' ' + (tag.mc || '') }}
                </el-tag>
            </el-row>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
        </template>
  </vp-dialog>
</template>

<script setup lang="ts" name="editWarehousePermission">
import { reactive, ref, watch } from 'vue';
import request from '/@/utils/request';

    const emits = defineEmits(['formSubmited']);   

    const tableData = ref([]);
    const loading = ref(false);
    const saveLoading = ref(false);

    const id = ref('');
    const multipleTable = ref();
    const editDialogRef = ref();
    const searchFormRef = ref();
    const multipleSelection = ref([] as any[]);

    const handleOpen = (id_: string)=>{
        id.value = id_;
        editDialogRef.value.handleOpen();
        multipleSelection.value = [];
        loadDataList();
    }

    const loadDataList = () => {
        loading.value = true;
        request.get(`/system/user/warehouse/queryByYhid/${id.value}`).then(res => {
            tableData.value = res?.data || [];
            multipleSelection.value = tableData.value.filter((obj: any) => {
                return obj.checked;
            });
            multipleSelection.value.forEach((obj: any) => {
                multipleTable.value.toggleRowSelection(obj);
            })
        }).finally(()=>{
            loading.value = false;
        })
    }

    const handleSelectionChange = (val: any) => { 
        multipleSelection.value = val;
    }

    const handleRowClick = (row: any) => {
        multipleTable.value.toggleRowSelection(row);
    }
    const handleSave = () => {
        if(loading.value){
            return;
        }
        saveLoading.value = true;
        request.post(`/system/user/warehouse/saveByYhid/${id.value}`, multipleSelection.value).then(()=>{
            emits("formSubmited");
            editDialogRef.value.handleClose();
        }).finally(()=>{
            saveLoading.value = false;
        })
    }

    const handleSelectedDelete = (row: any) => {
        multipleTable.value.toggleRowSelection(row, false);
    }


defineExpose({
    handleOpen
})
</script>
